<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>后台管理</title>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.1/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.1/themes/icon.css" />
	<script type="text/javascript" src="js/jquery-easyui-1.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="js/common.js"></script>

	<!--ztree-->
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css"/>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>

	<script type="text/javascript">
		function addBaiduTabs() {
			var ex = $("#tabs").tabs("exists","百度");
			if(ex) {
			    $("#tabs").tabs("select","百度");
			}else {
			    $("#tabs").tabs("add",{
			        iconCls:'icon-help',
					closable:true,
					title:'百度',
					content:'<iframe frameborder="0" height="100%" width="100%" src="http://www.baidu.com"></iframe>'
				})
			}
        }
        function addTencentTabs() {
            var ex = $("#tabs").tabs("exists","腾讯");
            if(ex) {
                $("#tabs").tabs("select","腾讯");
            }else {
                $("#tabs").tabs("add",{
                    iconCls:'icon-help',
                    closable:true,
                    title:'腾讯',
                    content:'<iframe frameborder="0" height="100%" width="100%" src="http://www.qq.com"></iframe>'
                })
            }
        }
        function addMaTabs() {
            var ex = $("#tabs").tabs("exists","马思纯");
            if(ex) {
                $("#tabs").tabs("select","马思纯");
            }else {
                $("#tabs").tabs("add",{
                    iconCls:'icon-help',
                    closable:true,
                    title:'马思纯',
                    content:'<IMG src="${pageContext.request.contextPath}/images/Masichun.jpg" border=0 width="100%" height="100%">'
                })
            }
        }



        /*zTree*/
		/*/创建ztree树*/
        //树的所有属性使用默认
		var setting={
		    callback:{
		        onClick:onClick1
			}
		};
		//标准json数据
		var zNodes = [
			{name:'节点1',children:[
				{name:'节点11',children:[
                    {name:'节点111'},
                    {name:'节点112'},
                    {name:'节点113'}
				]},
				{name:'节点12'},
				{name:'节点13'}
			]},
			{name:'百度',page:'http://www.baidu.com'},
			{name:'腾讯',page:'http://www.qq.com'},
			{name:'马思纯',page:'${pageContext.request.contextPath}/images/Masichun.jpg'}
		];
		//初始化树
		$(function () {
			$.fn.zTree.init($("#acc2"),setting,zNodes);
        });

        //点击ztree树节点时动态添加选项卡
		function onClick1(event,treeId,treeNode,clickFlag) {
			var name = treeNode.name;
			var page = treeNode.page;
			if(name="百度",name = "腾讯") {
			    var ex = $("#tabs").tabs("exists",treeNode.name);
			    if(ex) {
			        $("#tabs").tabs("select",treeNode.name);
				}else {
			        $("#tabs").tabs("add",{
			            closable:true,
			            title:treeNode.name,
						content:'<iframe frameborder="0" width="100%" height="100%" src="'+page+'"></iframe>'
					});
				}
			}

            if(name="马思纯") {
                var ex = $("#tabs").tabs("exists",treeNode.name);
                if(ex) {
                    $("#tabs").tabs("select",treeNode.name);
                }else {
                    $("#tabs").tabs("add",{
                        closable:true,
                        title:treeNode.name,
                        content:'<IMG border=0 width="100%" height="100%" src="'+page+'">'
                    });
                }
            }

        }


        var setting2 = {
			data:{
			    simpleData:{
			        enable:true
				}
			},
			callback:{
			    onClick:onClick
			}
		};
		var zNodes2 = [
			{id:1,pId:0,name:"父节点"},
			{id:11,pId:1,name:"父节点"},
			{id:111,pId:11,name:"百度",page:'http://www.baidu.com'},
			{id:112,pId:11,name:"腾讯",page:'http://www.qq.com'},
			{id:113,pId:11,name:"淘宝",page:'http://www.taobao.com'},
			{id:114,pId:11,name:"京东",page:'http://www.jingdong.com'}
		];
		$(function () {
			$.fn.zTree.init($("#acc3"),setting2,zNodes2);
        });
		function onClick(event,treeId,treeNode,clickFlag) {
		    var name = treeNode.name;
		    var page = treeNode.page;
			if(name != undefined && name != "父节点") {
			    var ex = $("#tabs").tabs("exists",treeNode.name);
			    if(ex) {
			        $("#tabs").tabs("select",treeNode.name);
				}else {
			        $("#tabs").tabs("add",{
			            closable:true,
						title:treeNode.name,
						content:'<iframe frameborder="0" width="100%" height="100%" src="'+page+'"></iframe>'

					});
				}
			}
        }



	</script>


</head>

<body class="easyui-layout">
	<div data-options="region:'north',title:'',split:true" style="height:80px;">
		<center><h1>后台管理系统</h1></center>
	</div>
    <div data-options="region:'west',title:'菜单',split:true" style="width:180px;">
		<div class="easyui-accordion" data-option="fit:true">
			<div id="acc1" title="帮助">
				<a onclick="addBaiduTabs()" id="baidulink" class="easyui-linkbutton">百度</a><br>
				<a onclick="addTencentTabs()" id="tencentlink" class="easyui-linkbutton">腾讯</a><br>
				<a onclick="addMaTabs()" id="malink" class="easyui-linkbutton">马思纯</a>
			</div>
			<div title="面板二">
				<ul id="acc2" class="ztree"></ul>
			</div>
			<div title="面板三">
				<ul id="acc3" class="ztree"></ul>
			</div>
		</div>
    </div>
    <div data-options="region:'center',title:''">
    	<div id="tabs" class="easyui-tabs" data-options="fit:true">
		    <div title="首页" style="padding:20px;" data-options="closable:true">
				<center><h1>欢迎访问首页!!</h1></center>
		    </div>

		</div>
    </div>
    

</body>
</html>